<template>
    <div>
        <!-- 使用index-list控制右边的字母出现的  -->
        <van-index-bar :index-list="computedList" @select="handlechange">
            <!-- 从citylist获取每个字母的列表 分别需要创建22个数组 -->
            <div v-for="data in cityList" :key="data.type">
                <van-index-anchor :index="data.type" />
                <!-- 一个字母数组里面需要创建多少个列表 -->
                <van-cell :title="item.name"  v-for="item in data.list" :key="item.cityId" @click="handleClick(item)" />
            </div>
        </van-index-bar>
    </div>
</template>
<script>
import http from '@/util/http'
import obj from '@/util/mixinsObj'
import { Toast } from 'vant'

// 混入  封装
// var obj = {
//     created() {
//         this.$store.commit('hide')
//     },
//      destroyed() {
//         this.$store.commit('show')
//     },
// }
export default {
    // 混入一些公共 的东西  也可以混入methods里面没有的方法，如果存在则覆盖  比...高明很多 。。。只会直接覆盖methods
    mixins:[obj],
    data() {
        return {
           cityList:[]
        }
    },
    // 离开之后显示底部
    // destroyed() {
    //     this.$store.commit('show')
    // },
    mounted() {
        // 一进页面吧底部选项卡隐藏
        // this.$store.commit('hide')
        http({
            url:'/gateway?k=9757741',
            headers:{
                'X-Host': 'mall.film-ticket.city.list'
            }
        }).then(res =>{
            // console.log(res.data.data.cities);
            this.cityList = this.renderCity(res.data.data.cities)  /* 使用函数redercity获取26个字母开头的数组 */
            // 1.300+条数据进行分组 
            // 2.利用转换完之后的数组，接合组件库进行页面渲染

        })
    },
    computed: {
        computedList(){
            /* 将citylist数组里面的每一个对象，通过map映射成他里面type值  所以出现abcdefg.....的字符串数组 */
            return this.cityList.map(item => item.type)
        }
    },
    methods: {
        handlechange(data){
            Toast(data)
        },
        handleClick(item){
            console.log(item.name,item.cityId);
            /* 传统多页面的都可以使用 */
            /*   location.href='#/cinemas?cityname='+item.name' */
            /* cookie,localStorage */

            // 单页面方案中：1。中间人模式； 2.bus事件总线模式  ，$emit

            // vuex -状态管理模式
            // console.log(this.$store.state);
            this.$store.commit('changeCityName',item.name)
            this.$store.commit('changeCityId',item.cityId)
            this.$router.back()
        },
        renderCity(list){
            // console.log(list);
            var letterList = []
            var cityList = []

            /* 遍历出26个英文字母 */
            for( var i = 65; i < 91; i++){
                // console.log(String.fromCharCode(i));
                letterList.push(String.fromCharCode(i))
            }

// 将leeterlist中的26个字母遍历景区，获取每次 的到的结果
            letterList.forEach(Letter => {
        // 将list里面的拼音的元素全部拿出来，截取第一个元素（拼音的开头字母），将其变成大写  es5的过滤filter
            var newlist = list.filter(item => item.pinyin.substring(0,1).toUpperCase()===Letter)
            // console.log(newlist);

// 只有长度大于0才可以遍历
            newlist.length > 0 && cityList.push({
                type:Letter,
                list:newlist
            })
            });
            // console.log(cityList);
            return cityList
        }
    },
}
</script>